<page-header [title]="'设备管理'"
             [content]="content">
    <ng-template #content>
        <nz-row *ngIf="deviceStatistics" nzType="flex"
                nzJustify="start"
                nzAlign="middle"
                [nzGutter]="16">
            <nz-col nzSpan="1"
                    class="row"></nz-col>
            <nz-col [nzSpan]="4"
                    class="row">
                <nz-statistic [nzValue]="deviceStatistics.deviceCount "
                              [nzTitle]="'设备总数'"></nz-statistic>
            </nz-col>
            <nz-col [nzSpan]="4"
                    class="row">
                <div style="width:1px;height:auto;border-right:1px solid #ccc;float:right;margin-right:30px;"></div>
                <nz-statistic [nzValue]="deviceStatistics.activeCount"
                              [nzTitle]="title">
                    <ng-template #title>
                        <nz-badge nzStatus="success"
                                  nzText="激活设备"></nz-badge>
                    </ng-template>
                </nz-statistic>

            </nz-col>

            <nz-col [nzSpan]="4"
                    class="row">
                <div style="width:1px;height:auto;border-right:1px solid #ccc;float:right;margin-right:30px;"></div>
                <nz-statistic [nzValue]="deviceStatistics.onlineCount"
                              [nzTitle]="onlineTitle">
                    <ng-template #onlineTitle>
                        <nz-badge nzStatus="success"
                                  nzText="当前在线"></nz-badge>
                    </ng-template>
                </nz-statistic>
            </nz-col>
        </nz-row>
    </ng-template>

</page-header>
<nz-card [nzTitle]="action"
         [nzExtra]="search">
    <ng-template #action>
        <nz-button-group>
            <button (click)="add()"
                    nz-button
                    nzType="primary"><i nz-icon
                                        type="plus"></i> 注册设备
            </button>
            <button nz-button
                    (click)="export()">
                <i nz-icon
                   nzType="download"></i>导出
            </button>
        </nz-button-group>
    </ng-template>
    <ng-template #search>
        <sf #sf [ui]="ui" layout="inline" [button]="{submit:'搜索'}" [schema]="searchSchema"
            (formSubmit)="st.reset($event)"
            (formReset)="st.reset($event)"></sf>
    </ng-template>


    <ng-template #alert>
        <nz-alert [nzType]="'info'"
                  [nzShowIcon]="true"
                  [nzMessage]="message">
            <ng-template #message>已选择
                <strong class="text-primary">{{ selectedRows.length }}项</strong>
                <a *ngIf="selectedRows.length > 0"
                   (click)="st.clearCheck()"
                   class="ml-lg">清空</a>

                <a *ngIf="selectedRows.length > 0"
                   (click)="updatePrice()"
                   class="ml-lg">修改单价</a>
            </ng-template>
        </nz-alert>
    </ng-template>

    <st #st
        [data]="url"
        [header]="alert"
        [bordered]="true"
        (change)="stOnChange($event)"
        [columns]="columns"></st>
</nz-card>




